<script setup>
	import { storeToRefs } from 'pinia'
	import { useHomeStore } from '@/stores/modules/home.js'
	import houseItemV9 from '@/components/house-item-v9/house-item-v9.vue'
	import houseItemV3 from '@/components/house-item-v3/house-item-v3.vue'

	import { useRouter } from 'vue-router'

	const houselistStore = useHomeStore()
	const { houselist } = storeToRefs(houselistStore)

	const router = useRouter()

	const onDetail = (data) => {
		router.push('/detail/' + data.houseId)
	}
</script>

<template>
	<div class="hot-content">
		<h2 class="title">热门精选</h2>
		<div class="list">
			<template
				v-for="(item, index) in houselist"
				:key="item.data.houseId">
				<house-item-v9
					v-if="item.discoveryContentType === 9"
					:item-data="item.data"
					@click="onDetail(item.data)">
				</house-item-v9>
				<house-item-v3
					v-else-if="item.discoveryContentType === 3"
					:item-data="item.data"
					@click="onDetail(item.data)">
				</house-item-v3>
			</template>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.hot-content {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 8px;
		.title {
			font-size: 22px;
			padding: 10px;
		}
		.list {
			display: flex;
			flex-wrap: wrap;
		}
		// 瀑布流
		// .list {
		// 	padding: 4px;
		// 	box-sizing: border-box;
		// 	column-count: 2;
		// 	column-gap: 5px;
		// 	// border-top: 1px solid #000;
		// }
	}
</style>
